<template>
    <div id="sideMenu" class="side-menu">
        <Menu
            :open-names="openNames"
            :active-name="activeName"
            class="menu-list"
            width="220px">
            <Submenu
                v-if="menuData.length"
                v-for="(item, index) in menuData"
                :name="index + ''"
                :value="item.moduleId"
                :key="item.moduleId">
                <template slot="title">
                    <Icon type="navicon-round"></Icon>
                    {{item.moduleName}}
                </template>
                <MenuItem
                    v-for="(subItem, subIndex) in item.apiList"
                    @click.native="selectApi({apiId: subItem.apiId, moduleName: item.moduleName})"
                    :name="index + '-' + subIndex"
                    :value="subItem.apiId"
                    :key="subItem.apiId"
                    :title="subItem.apiPath">
                    {{subItem.apiPath}}
                </MenuItem>
            </Submenu>
        </Menu>
    </div>
</template>

<script>
    export default {
        name: 'SideMenu',
        props: {
            menuData: {
                type: Array,
                default: () => [],
            },
            openNames: {
                type: Array,
                default: () => ['0'],
            },
            activeName: {
                type: String,
                default: '0-0',
            },
        },
        data() {
            return {};
        },
        mounted() {
            this.handleScroll();
        },
        methods: {
            handleScroll() {
                const sideMenuEle = document.getElementById('sideMenu');

                sideMenuEle.addEventListener('scroll', () => {
                    this.$emit('scrollPage', sideMenuEle.scrollTop > 5);
                });
            },

            selectApi(apiId) {
                this.$emit('selectApi', apiId);
            },
        },
    }
</script>

<style lang="less">
    .side-menu {
        position: fixed;
        left: 0;
        top: 70px;
        bottom: 0;
        overflow: auto;
        border-right: 1px solid #dddee1;
        .menu-list {
            &.ivu-menu-vertical.ivu-menu-light:after {
                width: 0;
            }
            .ivu-menu-item {
                overflow: hidden;
                font-size: 13px;
                text-overflow: ellipsis;
                padding: 10px 15px 10px 43px;
            }
        }
    }
</style>
